<template>
  <el-main>
   <el-table
    :data="newslist"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="content"
      label="新闻内容">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</el-main>

</template>

<script>
export default {
  data () {
    return {
      newslist:[]
    }
  },
//     created:function (){
//     this.$axios.post('/v1/news/')
//       //成功返回
//       .then(response=>{
//       	this.newslist = response.data.data;
//          console.log(response);
//       })
//       //失败返回
//       .catch(error=>{
//           console.log(error);
//       })
//  },
 methods: {
   // 获取列表数据方法
      getList() {
        let url = '/v1/news/'
        // 调用axios的get方法，获取数据
        this.$axios.get(url)
          .then(res => {
            console.log(res);
            // 将获取回来的数据赋值给list
             	this.newslist = res.data.data;
          })
          .catch(err => {
            console.log(err);
          })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        else if (rowIndex === 6) {
          return 'errow-row';
        }
        return '';
      },
       deleteRow(row) {
        this.dialogTableVisible = true;
				this.id = row.id;
        let url = '/v1/del/'+ this.id;
        this.$axios.delete(url)
          .then(res => {
           this.getList()
          })
      }
      },
    mounted () {
      this.getList()
    }
    }

</script>
<style>
	.el-table .warning-row {
    background: oldlace;
  }

 .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .errow-row {
    background: #FAB6B6;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

</style>-->
